<template>
    <el-row :gutter="20" style="padding: 10px;margin: 0px">
        <el-col :span="24">
            <el-table :data="list" @row-click="selectRow" @row-dblclick="goback" :row-class-name="tableRowClassName" style="cursor: pointer;">
                <el-table-column prop="selected" label="选择" width="100">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.selected"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="id"></el-table-column>
                <el-table-column prop="value" label="类型"></el-table-column>
            </el-table>
            <div style="text-align: right;padding: 10px">
                <el-button type="success" size="mini" icon="check" @click="goback">确定选择</el-button>
                <el-button type="danger" size="mini" icon="close" @click="closeWindow">取消关闭</el-button>
            </div>
        </el-col>
    </el-row>
</template>
<script>
import C from '@/common/common.js'

export default {
  name: 'selectOpenCardRowType',
  data () {
    return {
      list: [
        { id: 1, value: '产品', selected: false },
        { id: 2, value: '项目', selected: false },
        { id: 3, value: '卡项', selected: false }
      ],
      selectData: {}
    }
  },
  methods: {
    selectRow: function (row, event, column) {
      event.preventDefault()
      this.selectData = row
      this.checkselect()
    },
    tableRowClassName: function (row, index) {
      if (row.selected) return 'info-row'
    },
    // 计算是否选择
    checkselect: function () {
      this.list.forEach((row, index) => {
        row.selected = row.id == this.selectData.id
      })
    },
    goback: function () {
      if (!this.selectData.id) {
        alert('请选择数据！')
        return false
      }
      C.closeBrowserWindow(this.selectData)
    },
    closeWindow: function () {
      C.closeBrowserWindow()
    }
  },
  mounted: function () {

  }
}
</script>

<style>
	.info-row{
		background: #f30
	}
</style>